<template>
	<!-- 结算审核资料-->
	<div class="optimization">
		<!-- 内容部分 -->
		<div class="content">
			<div class="con_information">
				<!-- 订单信息 -->
				<div class="con_information_top">
					<span>
						<!-- <img class="pic-404__parent" src="@/assets/images/16557845125786128394.png" alt="404"> -->
					</span>
					<span style="margin-left: 10px;font-size: 20px;">账号信息</span>
				</div>
			</div>
			<div class="text_ipt">
				<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
					class="demo-ruleForm">
					<el-form-item label="账号" prop="age">
						<el-input v-model.number="ruleForm.age"></el-input>
					</el-form-item>
					<el-form-item label="旧密码" prop="pass">
				 	<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="新密码" prop="checkPass">
						<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'optimization',
		data() {
			var checkAge = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('账号不能为空'));
				}
			};
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					if (this.ruleForm.checkPass !== '') {
						this.$refs.ruleForm.validateField('checkPass');
					}
					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else {
					callback();
				}
			};
			return {
				tableData: [],
				account: '',
				ruleForm: {
					pass: '',
					checkPass: '',
					age: ''
				},
				rules: {
					pass: [{
						validator: validatePass,
						trigger: 'blur'
					}],
					checkPass: [{
						validator: validatePass2,
						trigger: 'blur'
					}],
					
				}
			}
		},
		created() {
			this.ruleForm.age = localStorage.getItem('phone');
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$axios({
							method: 'post',
							url: 'http://192.168.0.100:80/app3/consumer/changePasswordByPhone',
							data: {
								newPassword:this.ruleForm.checkPass,
								password:this.ruleForm.pass
							},
							headers: {
								token: localStorage.getItem('token')
							}
						}).then(res => {
							if (res.data.code == 200) {
								console.log(res.data)
								this.$router.push('/')
								// this.infodata = res.data.data;
							} else {
								 this.$message({
								  type: 'info',
								  message: res.msg
								});
							}
						})
						// alert('submit!');
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			cancelClick() {

			},
			sureclick() {

			},
			uploadClick() {

			},
			// 删除表格
			handleDelete(row, index) {
				this.$notify({
					title: 'Success',
					message: '删除成功',
					type: 'success',
					duration: 2000
				})
				this.list.splice(index, 1)
			},
			// 编辑表格
			handleUpdate(row) {
				this.temp = Object.assign({}, row) // copy obj
				this.temp.timestamp = new Date(this.temp.timestamp)
				this.dialogStatus = 'update'
				this.dialogFormVisible = true
				this.$nextTick(() => {
					this.$refs['dataForm'].clearValidate()
				})
			},
		}
	}
</script>


<style scoped>
	.optimization {
		width: 98%;
		height: 90%;
		margin: 0 auto;
		margin-top: 1%;
		background-color: #fff !important;

	}

	ul li {
		list-style: none;
	}

	li {
		display: flex;
		margin: 30px 0;
		font-size: 16px;
	}

	.text_left {
		width: 100px;
		text-align: right;
		line-height: 40px;
	}

	.text_right {
		width: 400px;
		border: 1px solid #eee;
	}

	.text_right input {
		width: 100%;
		height: 40px;
		line-height: 40px;
		border: 0 none;
		padding-left: 5px;
		color: #666;
	}

	.el-button--text {
		color: #333 !important;
	}


	.con_information {
		background-color: #fff;
		width: 99%;
		padding: 10px;
		border-radius: 8px;
	}

	.con_information_top {
		font-size: 18px;
		margin-top: 10px;
	}

	.con_information_top span:first-child {
		width: 20px;
		height: 20px;
	}

	.con_information_top img {
		width: 18px;
		height: 10px;
	}

	.con_Feedback {
		padding: 10px;
		margin-top: 20px;
		background-color: #fff;
		border-radius: 8px;
	}

	.con_btn {
		width: 95%;
		position: fixed;
		bottom: 10%;
		left: 5%;
	}

	.cencel {
		width: 250px;
		height: 40px;
		line-height: 40px;
		text-align: center;

	}

	.cencel button {
		background-color: #fff;
		color: #333;
		border: 0 none;
		width: 100%;
		border: 1px solid #eee;
		border-radius: 38px;
	}

	.submit {
		width: 250px;
		height: 40px;
		margin: 0 auto;
		line-height: 40px;
		text-align: center;
	}

	.submit button {
		background-color: #1d6aff;
		color: #fff;
		border: 0 none;
		width: 100%;
		border: 1px solid #eee;
		border-radius: 38px;
	}
</style>
